$(document).ready(function () {

    initTable()
    $('#btnAdd').bind('click',btnAddClick)
    $('#btnUpdate').bind('click',btnUpdateClick)
    $('#btnModify').bind('click',btnModifyClick);
    initDept('#deptForQuery',true);
    initDept('#deptForUpdate',false);
})


function btnModifyClick(){

    var empId  =parseInt( $('#empId').val());

   var emp=  employees.find(function (emp) {
        return emp.id = empId;
    })
    emp={
       name:$('#empName').val(),
       dept:{
           id: $('#deptForUpdate').val(),
           name:$('#deptForUpdate').find('option:selected').text()
       }
    }

    employees.splice(empId-1,1,emp);

    initTable();
}

function initDept(selector,isAllDept) {

    if(isAllDept){
        var opt = $('<option></option>').val(-1).text("----所有部门---")
        $(selector).append(opt);
    }

    $.each(depts,function (index,dept) {
        var opt = $('<option></option>').val(dept.id).text(dept.name)
        $(selector).append(opt);
    })



}

function btnUpdateClick(){
  var index=  $('.active').find('input[type="hidden"]').val();
  var emp= employees[index];
  $('#empId').val(emp.id);
  $('#empName').val(emp.name);
  $('#deptForUpdate').val(emp.dept.id);

}

function btnAddClick() {
    var emp = {
        name: prompt("员工姓名")
    }
    employees.unshift(emp);
    initTable();

}

function initTable() {

   $('#list').empty();

  $.each(employees,function (index,emp) {
      var tRow = $('<tr></tr>');
      var tDataIndex = $('<td></td>').text(index+1);
      var hiddenIndex = $('<input/>');
      hiddenIndex.attr('type','hidden');
      hiddenIndex.val(index)
      tDataIndex.append(hiddenIndex);
      var tDataName = $('<td></td>').text(emp.name);
      var tDataDept = $('<td></td>').text(emp.dept.name);

      tRow.append(tDataIndex).append(tDataName).append(tDataDept);
      tRow.bind('click',function () {
          $('.active').removeClass('active');
          $(this).addClass('active');
      })

      $('#list').append(tRow);
  })

    var toolbar= $('#toolbar');

     $('#list').before(toolbar);

}

/***
 *  2. 修改
 *     1. 点击变化状态
 *          无-有
 *          状态的转移
 *     2.  点击  --- 取得相关数据
 *               id ---逻辑主键
 *     3.  修改  --- 更新数据
 * */